<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이벤트 처리 : 사용자에 대해 반응하기</title>
<style type="text/css">
	.active {
		color: red;
		border: 3px solid blue;
	}
</style>
<script type="text/javascript">
var x = 10, y=20;
function share(){
	return x+y;
}
</script>
</head>
<body>
	<div class="active">Hello World!</div>
	<div id = "target">Hello World!</div>
	<script type="text/javascript">
		document.getElementById("target").setAttribute("class", "active");
	</script>
	<input type="button" value="클릭하세요" onclick="alert('hello')">
	
	<!-- 버튼을 클릭하면 덧셈 결과가 출력되도록 하시오. 출력함수는  alert()임 -->
	<button onclick="alert(func())">덧셈결과 출력</button>
	<script>
		var x = 10, y=20;
		function func(){
			return x+y;
		}
	</script>
	
	<script type="text/javascript">
	document.write(ex()); // ex()의 결과가 출력되지 않음. javascript는 순서대로 실행되기 때문에
	</script>
	body 영역의 출력
	<br>
	<input type="button" value="계산" onclick="alert(ex());"><br>
	<script>
		var x=10, y=20;
		function ex(){
			return x+y;
		}
		document.write(ex());
	</script>
	
	<script type="text/javascript">
		var z;
		alert(z);		//undefined
		z = 5;
		alert(typeof z);//number
		z = "홍길동";
		alert(typeof z);//string
	</script>
	
	<script type="text/javascript">
	var x=1;
	var y=2;
	function sum(x,y){
		result = x+y;	// var를 사용하지 않고 선언된 result는 전역변수
		return result;
	}
	document.write(x+" "+y+" "+sum(x,y));	//3
	document.write("<br>"+result);			//3
	</script>
	
	
	
</body>
</html>